<template>
  <h3>watch使用</h3>
  <div class="flex">
    <p>count: {{ count }}</p>
    <el-button @click="count++">+1</el-button>
  </div>
  <div class="flex">
    <p>userInfo.name: {{ userInfo.name + "----" + userInfo.age }}</p>
    <el-button @click="userInfo.age++">age++</el-button>
  </div>
  <p>
    watch和watchEffect是Vue 3.0中新增的两个响应式API，用于监听数据的变化。watch适用于需要获取新值和旧值，或者需要懒执行的场景，而watchEffect适用于需要监听多个数据源，并且需要立即执行的场景。它们之间的区别如下：
  </p>
  <p>
    1.watch是监听单个数据源，可以设置immediate和deep选项，可以获取新值和旧值；watchEffect则是监听一组数据源，不能设置immediate和deep选项，不能获取新值和旧值。
   
  </p>
  <p>2. watch是懒执行的，只有在数据变化时才会执行回调函数，而watchEffect则是立即执行的，不管数据是否变化。
    watch可以监听计算属性，而watchEffect不能监听计算属性。</p>
  <p>3. watch可以监听多个数据源，而watchEffect只能监听一个数据源。</p>
</template>
<script lang="tsx">
import { defineComponent, ref, watch, reactive, watchEffect } from "vue";

export default defineComponent({
  name: "CustomWatch",
  setup() {
    const count = ref(0);
    watch(count, (newVal, oldVal) => {
      console.log("count change", newVal, oldVal);
    });
    const userInfo = reactive({
      name: "李明亮",
      age: 18,
    });
    // 这个会走但是打印不出来改变值是newval和oldval的差异
    watch(
      userInfo,
      (newVal, oldVal) => {
        console.log("userInfo change", newVal, oldVal);
      },
      { immediate: true }
      );
    // 这个会走可以打印出来改变值是newval和oldval的差异
    // 但是如果userInfo.age改变，userInfo不会改变
    // 所以需要使用函数返回值
    watch(
      () => userInfo.age,
      (newVal, oldVal) => {
        console.log("userInfo.age change", newVal, oldVal);
      }
    );
    watchEffect(() => {
      console.log("userInfo change", userInfo.age);
    });
    return {
      count,
      userInfo,
    };
  },
});
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
  column-gap: 10px;
}
</style>
